<template>
  <Modal title="修改状态" :width="500" :show-confirm-button="false">
    <div class="modify-status-modal">
      <div class="form-item">
        <label>手牌号:</label>
        <a-input
          v-model:value="formData.cardNumber"
          placeholder="请输入手牌号"
        />
      </div>

      <div class="form-item">
        <label>当前状态:</label>
        <div class="current-status">空闲</div>
      </div>

      <div class="form-item">
        <label>修改状态:</label>
        <a-radio-group v-model:value="formData.newStatus">
          <a-radio value="idle">空闲</a-radio>
          <a-radio value="occupied">占用</a-radio>
          <a-radio value="dayUse">日用</a-radio>
          <a-radio value="disabled">禁用</a-radio>
        </a-radio-group>
      </div>

      <div class="form-item">
        <label>备注:</label>
        <a-textarea
          v-model:value="formData.remarks"
          :rows="3"
          placeholder="请输入备注信息"
        />
      </div>

      <div class="form-item">
        <label>操作人员:</label>
        <a-select
          v-model:value="formData.operator"
          placeholder="请选择操作人员"
        >
          <a-select-option value="王玉">王玉</a-select-option>
          <a-select-option value="王雨然">王雨然</a-select-option>
          <a-select-option value="王雨涵">王雨涵</a-select-option>
        </a-select>
      </div>

      <div class="modal-actions">
        <a-button type="primary" @click="handleConfirm">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </div>

  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

defineOptions({
  name: 'ModifyStatusModal',
});

interface Emits {
  (e: 'success'): void;
}

interface ModalPayload {
  cardNumber?: string;
}

const emit = defineEmits<Emits>();

const formData = ref({
  cardNumber: '',
  newStatus: 'disabled',
  remarks: '',
  operator: '王玉',
});

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<ModalPayload>();
    formData.value = {
      cardNumber: data?.cardNumber || '',
      newStatus: 'disabled',
      remarks: '',
      operator: '王玉',
    };
  },
});

const handleConfirm = () => {
  if (!formData.value.cardNumber.trim()) {
    message.warning('请输入手牌号');
    return;
  }

  if (!formData.value.operator) {
    message.warning('请选择操作人员');
    return;
  }

  // 这里可以调用API修改手牌状态
  message.success(`手牌 ${formData.value.cardNumber} 状态修改成功`);
  emit('success');
  modalApi.close();
};

const handleCancel = () => {
  modalApi.close();
};
</script>

<style scoped>
.modify-status-modal {
  padding: 20px 0;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.current-status {
  padding: 8px 12px;
  color: #666;
  background: #f0f0f0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}
</style>
